<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Interactive 3D Tiles styling.">
    <meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
    <script type="text/javascript">
    require.config({
        baseUrl : '../../../Source',
        waitSeconds : 60
    });
    </script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
    'use strict';
//Sandcastle_Begin
// A demo of interactive 3D Tiles styling
// Styling language Documentation: https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/Styling
// Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page
var viewer = new Cesium.Viewer('cesiumContainer');

// Set the initial camera view to look at Manhattan
var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
viewer.scene.camera.setView({
    destination: initialPosition,
    orientation: initialOrientation,
    endTransform: Cesium.Matrix4.IDENTITY
});

// Load the NYC buildings tileset.
var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) });
viewer.scene.primitives.add(tileset);

// Color buildings based on their height.
function colorByHeight() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        color: {
            conditions: [
                ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
                ["${height} >= 200", "rgb(102, 71, 151)"],
                ["${height} >= 100", "rgb(170, 162, 204)"],
                ["${height} >= 50", "rgb(224, 226, 238)"],
                ["${height} >= 25", "rgb(252, 230, 200)"],
                ["${height} >= 10", "rgb(248, 176, 87)"],
                ["${height} >= 5", "rgb(198, 106, 11)"],
                ["true", "rgb(127, 59, 8)"]
            ]
        }
    });
}

// Color buildings by their total area.
function colorByArea() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        color: "mix(color('yellow'), color('red'), min(${area} / 10000.0, 1.0))"
    });
}

// Color buildings by their latitude coordinate.
function colorByLatitude() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        color: {
            conditions: [
                ["${latitude} >= 0.7125", "color('purple')"],
                ["${latitude} >= 0.712", "color('red')"],
                ["${latitude} >= 0.7115", "color('orange')"],
                ["${latitude} >= 0.711", "color('yellow')"],
                ["${latitude} >= 0.7105", "color('lime')"],
                ["${latitude} >= 0.710", "color('cyan')"],
                ["true", "color('blue')"]
            ]
        }
    });
}

// Color buildings by distance from a landmark.
function colorByDistance() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        defines : {
            distance : "distance(vec2(${longitude}, ${latitude}), vec2(-1.291777521, 0.7105706624))"
        },
        color : {
            conditions : [
                ["${distance} > 0.0002", "color('gray')"],
                ["true", "mix(color('yellow'), color('green'), ${distance} / 0.0002)"]
            ]
        }
    });
}

// Color buildings with a '3' in their name.
function colorByNameRegex() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        color : "(regExp('3').test(${name})) ? color('cyan', 0.9) : color('purple', 0.1)"
    });
}

// Show only buildings greater than 200 meters in height.
function hideByHeight() {
    tileset.style = new Cesium.Cesium3DTileStyle({
        show : "${height} > 200"
    });
}

Sandcastle.addToolbarMenu([{
    text : 'Color By Height',
    onselect : function() {
        colorByHeight();
    }
}, {
    text : 'Color By Area',
    onselect : function() {
        colorByArea();
    }
}, {
    text : 'Color By Latitude',
    onselect : function() {
        colorByLatitude();
    }
}, {
    text : 'Color By Distance',
    onselect : function() {
        colorByDistance();
    }
}, {
    text : 'Color By Name Regex',
    onselect : function() {
        colorByNameRegex();
    }
}, {
    text : 'Hide By Height',
    onselect : function() {
        hideByHeight();
    }
}]);

colorByHeight();

//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
    startup(Cesium);
} else if (typeof require === "function") {
    require(["Cesium"], startup);
}
</script>
</body>
</html>
